<template>
    <form-field :dirty="dirty" @valid="onValid">
        <datetime 
        :theme="theme" 
        :weekText="weekText"
        :importants="importants"
        :now="now"
        :clear="clear"
        :min="min" 
        :max="max" 
        :value="value" 
        :format="format" 
        :type="type" 
        :disabled="disabled" 
        :placeholder="placeholder" @change="onChange"/>
    </form-field>
</template>
<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import FormField from './field.vue'
import Datetime from './datetime.vue'
export default defineComponent({
    components:{FormField,Datetime},
    props:{
        placeholder:{type:String},
        disabled:{type:Boolean,default:false},
        value:{type:String},
        
        theme:{type:String},
        weekText:{
            type:Array as PropType<Array<string>>
        },
        importants:{
            type:Array as PropType<Array<{title:string|number,md:string,desc:string}>>
        },
        clear:{
            type:Boolean,
            default:true
        },
        now:{
            type:Boolean,
            default:true
        },
        min:{type:String},
        max:{type:String},
        type:{type:String,default:"datetime"},
        format:{type:String}
    },
    setup(props,{emit}) {
        const dirty = ref(props.value)
        const onChange = (v:string)=>{
            dirty.value = v
        }
        const onValid = (e:{valid:boolean,tip:string,v:unknown})=>{
            if(e.valid)
            emit("ph-change",e.v)
        }
        return {
            onValid,
            onChange,
            dirty
        }
    },
})
</script>
